<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
<!-- 
BFC（Block Formatting Context，块级格式化上下文）是CSS中的一个重要概念，用于描述元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
当一个元素创建了BFC时，它为其内容建立了一个独立的布局环境，这个环境内的布局不会影响到外部元素，同样，外部的布局也不会影响到这个环境。

BFC的特性：
独立布局环境：BFC内部的元素布局与外部无关，同样，BFC内部的布局变化也不会影响到外部元素。
防止元素垂直外边距重叠：在标准的文档流中，两个垂直方向相邻的块级元素的外边距（margin）会重叠。但是，如果它们分别属于不同的BFC，则它们的外边距不会重叠。
包含浮动元素：在BFC中，浮动的元素会被包含在该BFC的高度计算之内，这有助于解决浮动元素导致的父元素高度塌陷问题。
阻止元素被浮动元素覆盖：普通元素与浮动元素重叠时，可能会被浮动元素覆盖。但如果普通元素创建了BFC，则可以避免被浮动元素覆盖。

如何创建BFC：
一个元素可以通过以下方式之一来创建BFC：
根元素（<html>）
浮动元素（float属性不为none）
绝对定位或固定定位的元素（position属性为absolute或fixed）
display属性为inline-block、table-cell、table-caption、flex、inline-flex或grid的元素
overflow属性不为visible的元素（例如overflow: auto或overflow: hidden）

应用场景：
清除浮动：通过为父元素创建BFC，可以确保父元素能够包含其浮动的子元素，从而避免高度塌陷问题。
避免外边距重叠：当两个块级元素的外边距相遇时，它们会重叠。通过为其中一个元素创建BFC，可以防止这种重叠。
防止内容溢出：通过设置overflow属性来创建BFC，可以阻止内容溢出其容器。
布局隔离：使用BFC可以实现复杂的布局效果，确保不同部分的布局不会相互干扰。

解决：
1.元素开启BFC后，其子元素不会再产生margin塌陷问题

2.元素开启BFC后，自已不会被其他浮动元素所覆盖

3.元素开启BFC后，就算其子元素浮动，元素自身高度也不会場陷

-->